<template>
  <f7-page>
    <f7-navbar no-shadow sliding>
      <f7-nav-left>
        <f7-link back icon-f7="chevron_left"></f7-link>
      </f7-nav-left>
      <f7-nav-title class="nav-title"></f7-nav-title>
      <f7-nav-right class="nav-title-right">
        <f7-link icon-f7="ellipsis"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <!-- <div class="page-pg">
      <p>
        <f7-progressbar infinite></f7-progressbar>
      </p>
    </div> -->
    <div class="page-pg">
      <p id="demo-determinate-container"></p>
    </div>
  </f7-page>
</template>

<script>
export default {
  name: "pageLoading",
  methods: {
    showDeterminate() {
      const self = this;
      const app = self.$f7;
      if (self.determinateLoading) return;
      self.determinateLoading = true;
      let progressBarEl = app.progressbar.show(
        "#demo-determinate-container",
        0
      );
      let progress = 0;
      function simulateLoading() {
        setTimeout(() => {
          const progressBefore = progress;
          progress += 1;
          app.progressbar.set(progressBarEl, progress);
          if (progressBefore < 80) {
            simulateLoading(); //小于80时的速度
          } else {
            overSimulateLoading(); //大于80后的速度
          }
        }, 40);
      }
      function overSimulateLoading() {
        setTimeout(() => {
          const progressBefore = progress;
          progress += 0.2;
          app.progressbar.set(progressBarEl, progress);
          if (progressBefore < 95) {
            overSimulateLoading(); // keep "loading"
          } else {
            self.determinateLoading = false;
            // app.progressbar.hide(progressBarEl); // hide
          }
        }, 100);
      }
      simulateLoading();
    },
  },
  mounted() {
    this.showDeterminate(true);
  },
};
</script>

<style scoped lang="less">
::v-deep.navbar {
  height: calc(88px * var(--ratio));
  .navbar-inner {
    justify-content: space-between;
    background-color: var(--color-fill-grey-inverse);
    .left {
      padding-left: calc(34px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
    .title {
      color: var(--color-ironblack);
      font-size: var(--font-size-maintitle);
    }
    .right {
      padding-right: calc(38px * var(--ratio));
      .link {
        padding: 0;
        width: auto;
        color: var(--color-ironblack);
      }
    }
  }
}
.md .navbar a.link:before{
  content: none;
}
/deep/.page-content {
  padding-top: calc(88px * var(--ratio));
}
.page-pg {
  background: var(--color-divider-background);
  height: 100%;
}
p {
  margin: 0 !important;
}
</style>